<template>
    <div>
        <h3>商品分类</h3>
        <!--商品分类面包屑导航-->
        <el-breadcrumb separator="/">
            <el-breadcrumb-item :to="{ path: '/home' }">首页</el-breadcrumb-item>
            <el-breadcrumb-item>分类管理</el-breadcrumb-item>
            <el-breadcrumb-item>分类列表</el-breadcrumb-item>
        </el-breadcrumb>
        <!--卡片视图区域-->
        <el-card>
            <!--添加分类按钮区域-->
            <el-row :gutter="20">
                <el-col :span="4">
                    <el-button type="primary" @click="showAddCatDialog">添加分类</el-button>
                </el-col>
            </el-row>
        </el-card>
        <el-card>
            <tree-table :data="cateList" :columns="columns" empty-text="暂无分类数据" show-index index-text="序号" :show-row-hover="false" :selection-type="false" :expand-type="false">
                <!--是否有效区域，设置对应的模板列 ,slot="isok" 与column中设置的template一致-->
                <template slot="isok" slot-scope="scope">
                    <i class="el-icon-success" v-if="scope.row.cat_deleted == false" style="color:limegreen;"></i>
                    <i class="el-icon-error" v-else style="color: red;"></i>
                </template>

                <!--排序-->
                <template slot="order" slot-scope="scope">
                    <el-tag size="mini" type="normal" v-if="scope.row.cat_level == 0">一级</el-tag>
                    <el-tag size="mini" type="success" v-else-if="scope.row.cat_level == 1">二级</el-tag>
                    <el-tag size="mini" type="warning" v-else>三级</el-tag>
                </template>

                <!--操作-->
                <template slot="opt" slot-scope="scope">
                    <el-button size="mini" type="primary" icon="el-icon-edit">编辑</el-button>
                    <el-button size="mini" type="danger" icon="el-icon-delete">删除</el-button>
                </template>

            </tree-table>
        </el-card>

        <!--分页区域-->
        <!--
            handleSizeChange ： 当每页显示的条数发生变化的时候,修改每页显示的条数的字段,并且对分类列表进行重置
            handleCurrentChange : 当前页发生变化的时候,修改当前页发生变化的数据，并且对分类列表进行重置
            current-page  :  当前页
            page-sizes :  分页的条数的规则
            page-size :  每页显示的条数
            total : 分类的总数
        -->
        <div class="block">
            <el-pagination
                    @size-change="handleSizeChange"
                    @current-change="handleCurrentChange"
                    :current-page="queryInfo.pagenum"
                    :page-sizes="[3, 5, 10, 15]"
                    :page-size="queryInfo.pagesize"
                    layout="total, sizes, prev, pager, next, jumper"
                    :total="total">
            </el-pagination>
        </div>

        <!--添加分类对话框-->
        <!---->
        <el-dialog title="添加分类" :visible.sync="addCatdialogVisible" width="30%" @close="addCatdialogClosed">
            <el-form ref="addCatFormRef" :model="addCatForm" :rules="addCatFormRule" label-width="80px">
                <el-form-item label="分类名称" prop="cat_name">
                    <el-input v-model="addCatForm.cat_name"></el-input>
                </el-form-item>
                <el-form-item label="父级分类" prop="cat_pid">
                    <el-cascader
                            v-model="selectedKeys"
                            :options="parentCateList"
                            :props="cascaderProps"
                            filterable
                            change-on-select
                            @change="parentCateChange"></el-cascader>
                </el-form-item>
            </el-form>
              <span slot="footer" class="dialog-footer">
                    <el-button @click="addCatdialogVisible = false">取 消</el-button>
                    <el-button type="primary" @click="addCate">确 定</el-button>
            </span>
        </el-dialog>

    </div>
</template>

<script>
    export default {
        data(){
            return {
                //商品分类数据列表
                cateList : [],
                //父级分类列表
                parentCateList : [],
                cascaderProps:{
                    value : 'cat_id',
                    label : 'cat_name',
                    children : 'children',
                    expandTrigger : 'hover'
                },
                //绑定用户选择的分类值
                selectedKeys : [],
                //查询分类数据的条件
                queryInfo : {
                    type : 3, //表示一层,二层,三层列表
                    pagenum : 1,//当前的页码值
                    pagesize : 5//每页显示的树木
                },
                //商品分类的总数
                total : 0,
                columns : [
                    {label : '分类名称',prop: 'cat_name'},
                    //type : template 表示当前列为模板列    template:'isok' 代表当前的模板名称为isok
                    {label : '是否有效',prop:'',type:'template',template:'isok'},
                    {label: '排序' , prop : '', type : 'template' , template:'order'},
                    { label: '操作' , prop : '' , type:'template' , template : 'opt' }
                ],
                //添加分类的对话框的显示与隐藏
                addCatdialogVisible : false,
                addCatForm:{
                    cat_name : '',
                    cat_level : 0,
                    cat_pid : 0
                },
                addCatFormRule : {
                    cat_name : [
                        {required : true , message : '分类名称不能为空',trigger:'blur'}
                    ]
                }
            }
        },
        created() {
            this.getCateList();
        },
        methods:{
            //获取当前的商品分类
            async getCateList(){
                const {data : res} = await this.$http.get('categories',{params:this.queryInfo});
                if(res.meta.status != 200){
                   return this.$message.error('分类获取失败');
                }
                //获取成功之后进行赋值
                this.cateList = res.data.result;
                this.total = res.data.total;
            },
            //pagesize 发生变化的时候触发   每页显示的条数发生变化的时候触发
            handleSizeChange(newSize){
                console.log(newSize)
                this.queryInfo.pagesize = newSize;
                this.getCateList();
            },
            //当前页面发生改变的时候触发
            handleCurrentChange(current){
                this.queryInfo.pagenum = current;
                this.getCateList();
            },
            //展示添加分类的窗口
            showAddCatDialog(){
                //调用获取分类的列表
                this.getParentCateList();
                this.addCatdialogVisible = true;
            },
            async getParentCateList(){
                //获取父级分类数据列表
                const { data : res } = await this.$http.get('categories',{
                    params : {type : 2}
                })
                if(res.meta.status != 200){
                    return this.$message.error('获取商品分类失败');
                }
                this.parentCateList = res.data;
                console.log(this.parentCateList);
            },
            parentCateChange(){
                //级联菜单中选项发生变化的时候触发
                console.log(this.selectedKeys)
                //如果用户选择了父级分类
                if(this.selectedKeys.length > 0){
                    //则将数组中的最后一项设置为父级分类
                    //设置父级分类
                    this.addCatForm.cat_pid = this.selectedKeys[this.selectedKeys.length - 1];
                    //设置level
                    this.addCatForm.cat_level = this.selectedKeys.length;
                }else{
                    //如果没有选择的话，默认就是一级分类，就是0   一级分类的等级就是0
                    this.addCatForm.cat_pid = 0;
                    this.addCatForm.cat_level = 0;
                }
            },
            addCate(){
                //首先,对表单进行验证
                this.$refs.addCatFormRef.validate(async valid => {
                    if(!valid){
                        return this.$message.error('请填写完整的分类数据');
                    }
                    //如果验证通过了,调用添加接口
                    const {data : res} = await this.$http.post('categories',this.addCatForm);
                    if(res.meta.status != 201){
                        return this.$message.error(res.meta.msg);
                    }
                    this.$message.success(res.meta.msg);
                    //添加成功之后进行数据的刷新
                    this.getCateList();
                    //关闭当前的窗口
                    this.addCatdialogVisible = false;
                });

            },
            //关闭添加分类对话框,重置表单
            addCatdialogClosed(){
                this.$refs.addCatFormRef.resetFields();
                //将选中的分类数据重置
                this.selectedKeys = [];
                //将父级的id进行重置
                this.addCatForm.cat_pid = 0;
                //将现在的分类等级进行重置
                this.addCatForm.cat_level = 0;
            }


        }
    }
</script>

<style scoped>
    .el-card{
        margin-top: 7px;
    }
</style>
